<template>
  <el-card>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>馆藏类别列表</el-breadcrumb-item>
      <el-breadcrumb-item>类别信息管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="10">
      <el-col :span="8">
        <el-input v-model="cateName" placeholder="请输入图书类别名称查询" clearable @change="listPage()"></el-input>
      </el-col>
      <el-col :span="16">
        <el-button icon="el-icon-plus" type="success" @click="openAddDialog">添加</el-button>
      </el-col>
    </el-row>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="cateid" label="ID" width="180">
      </el-table-column>
      <el-table-column prop="catename" label="类别名称" width="180">
      </el-table-column>
      <el-table-column prop="createtime" label="创建时间">
      </el-table-column>
      <el-table-column prop="modifytime" label="修改时间">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="点击修改" placement="bottom">
            <el-button type="warning" @click="openEditDialog(scope.row)" icon="el-icon-edit" circle></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="点击删除" placement="bottom">
            <el-button @click="remove(scope.row)" type="danger" icon="el-icon-delete" circle></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pager.page"
      :page-sizes="[5, 10, 15, 20]" :page-size="pager.size" layout="total, sizes, prev, pager, next, jumper"
      :total="pager.total">
    </el-pagination>
    <el-dialog title="图书类别添加" :show-close="false" :close-on-click-modal="false" :visible.sync="addDialogFlag">
      <el-form :model="category" :rules="rules" ref="category">
        <el-form-item label="类别名称" :label-width="formLabelWidth" prop="catename">
          <el-input v-model="category.catename" placeholder="请输入类别名称"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogFlag=!addDialogFlag">取 消</el-button>
        <el-button type="primary" @click="save()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="图书类别修改" :show-close="false" :close-on-click-modal="false" :visible.sync="editDialogFlag">
      <el-form :model="category" :rules="rules" ref="category">
        <el-form-item label="类别名称" :label-width="formLabelWidth" prop="catename">
          <el-input v-model="category.catename" placeholder="请输入类别名称"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogFlag=!editDialogFlag">取 消</el-button>
        <el-button type="primary" @click="update()">确 定</el-button>
      </div>
    </el-dialog>

  </el-card>

</template>

<script>
  export default {
    data() {
      return {
        rules:{
          catename:[
            { required: true, message: '请输入类别名称', trigger: 'blur' },
          ]
        },
        category:{
          cateid:0,
          catename:''
        },
        addDialogFlag:false,
        editDialogFlag:false,
        cateName: '',
        tableData: [],
        pager: {
          page: 1,
          size: 5,
          total: 0
        }
      }
    },
    methods: {
      openAddDialog(){
        this.addDialogFlag=!this.addDialogFlag;
      },
      openEditDialog(row){
        this.category = row;
        this.editDialogFlag=!this.editDialogFlag;
      },
      save(){
        // let params = new URLSearchParams();
        // params.append("catename",this.category.catename)
        this.$refs['category'].validate(valid=>{
          if(valid){
            this.$http.post('http://127.0.0.1/category/add', this.category)
            .then(res=>{
              if(res.data.code==200){
                this.$message({
                  message:res.data.message,
                  type:'success'
                })
                this.addDialogFlag=!this.addDialogFlag;
                this.listPage()
              }
            }).catch(error=>{
              this.$message.error('网络异常')
            })
          }
        })

      },
      update(){
        // let params = new URLSearchParams();
        // params.append("catename",this.category.catename)
        // params.append("cateid",this.category.cateid)
        this.$refs['category'].validate(valid=>{
          if(valid){
            this.$http.post('http://127.0.0.1/category/update', this.category)
            .then(res=>{
              if(res.data.code==200){
                this.$message({
                  message:res.data.message,
                  type:'success'
                })
                this.editDialogFlag=!this.editDialogFlag;
                this.listPage()
              }
            }).catch(error=>{
              this.$message.error('网络异常')
            })
          }
        })
        
      },
      remove(row){
        this.$http.post('http://127.0.0.1/category/remove?cateid='+row.cateid)
        .then(res=>{
          if(res.data.code==200){
            this.$message({
              message:res.data.message,
              type:'success'
            })
            this.listPage()
          }
        }).catch(error=>{
          this.$message.error('网络异常')
        })
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pager.size = val;
        this.listPage();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pager.page = val;
        this.listPage();
      },
      listPage() {
        this.$http.get('http://127.0.0.1/category/listPage', {
          params: {
            page: this.pager.page,
            size: this.pager.size,
            cateName: this.cateName
          }
        }).then(res => {
          console.log(res)
          this.tableData = res.data.data.data;
          this.pager.total = res.data.data.total;
        }).catch(error=>{
          this.$message.error('网络异常')
        })
      }
    },
    created() {
      this.listPage();

    }
  }
</script>

<style>
  .el-breadcrumb {
    padding-bottom: 20px;
  }

  .el-pagination {
    padding-top: 10px;
  }
</style>
